
import styled from 'styled-components';
import React, { CSSProperties, useState } from 'react';
import { PlusOutlined, OrderedListOutlined } from '@ant-design/icons';

import { CategoryList } from '../../components';

export interface ApplicationStorePageProps {
    style?: CSSProperties;
}

const DEFAULT_CATEGORIES: Array<{ identifier: string, name: string, icon?: any }> = [
    {
        identifier: 'ALL',
        name: '全部',
    },
    {
        identifier: '推荐',
        name: '推荐',
    },
    {
        identifier: '办公',
        name: '办公',
    },
    {
        identifier: '教育',
        name: '教育',
    },
    {
        identifier: '游戏',
        name: '游戏',
    },
    {
        identifier: '图片',
        name: '图片',
    },
    {
        identifier: '视频',
        name: '视频',
    }
];

export const ApplicationDevelopPage: React.FC<ApplicationStorePageProps> = (props) => {

    const [categories, setCategories] = useState<Array<{ identifier: string, name: string, icon?: any }>>(DEFAULT_CATEGORIES);

    const [activeKey, setActiveKey] = useState<string | null>(null);

    return (
        <Container style={props.style}>
            <CategoryList
                style={{
                    width: '160px'
                }}
                items={categories.map((item, index) => {
                    return {
                        label: item.name,
                        key: item.identifier,
                        icon: <OrderedListOutlined />,
                    };
                })}
                activeKey={activeKey}
                onChange={async (key, item) => {
                    setActiveKey(key);
                }}
                filter={false}
            ></CategoryList>
            <Content>
            </Content>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;

const Content = styled.div`
    height: 100%;
    flex:1;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;